<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>v-model 相关修饰符的使用</title>
</head>
<body>
<div id="app">
    <input type="text" name="info1" id="info1" v-model="info1">
    <label for="info1"></label>

    <div>{{ info1 }}</div>

    <!--在文本框/编辑框 失去输入焦点或按下回车键的时候，给将 HTML 页面信息同步到 Javascript-->
    <input type="text" name="info2" id="info2" v-model.lazy="info2">
    <label for="info2"></label>

    <div>{{ info2 }}</div>


    <input type="text" name="whitespace1" id="whitespace1" v-model="whitespace1">
    <label for="whitespace1"></label>

    <div>{{ whitespace1 }}</div>

    <!--移除输入内容两端空格-->
    <input type="text" name="whitespace2" id="whitespace2" v-model.trim="whitespace2">
    <label for="whitespace2"></label>

    <div>{{ whitespace2 }}</div>


    <input type="text" name="number1" id="number1" v-model="number1">
    <label for="number1"></label>

    <div>{{ number1 }}</div>

    <!--将输入的合法字符串转为数字,非数字字符还是 string 类型-->
    <input type="text" name="number2" id="number2" v-model.number="number2">
    <label for="number2"></label>

    <div>{{ number2 }}</div>

    <!--通过 type 属性的值为 number，限制只能输入数字-->
    <input type="number" name="number3" id="number3" v-model.number="number3">
    <label for="number3"></label>

    <div>{{ number3 }}</div>

</div>

<script type="module">
    import {createApp, ref, watch} from "../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                let info1 = ref(null)
                let info2 = ref(null)

                let whitespace1 = ref(null)
                let whitespace2 = ref(null)

                let number1 = ref(null)
                let number2 = ref(null)
                let number3 = ref(null)

                watch(
                    number1,
                    () => {
                        console.log(typeof number1.value);
                    }
                )

                watch(
                    number2,
                    () => {
                        console.log(typeof number2.value);
                    }
                )

                watch(
                    number3,
                    () => {
                        console.log(typeof number3.value);
                    }
                )
                return {
                    info1, info2, whitespace1, whitespace2, number1, number2, number3
                }
            }
        }
    );

    app.mount("#app")
</script>
</body>
</html>